<template>
  <view>
    <cu-custom :isBack="true" :bgColor="showBg ? 'bg-groupon1' : ''">
      <block slot="backText"></block>
      <block slot="content">邀请好友拼团</block>
    </cu-custom>
    <view class="spellGroup">
      <image class="spellGroup-bg" mode="widthFix" src="../../../static/images/grouponBack.png"></image>
      <view class="article no-card groupon-list">
        <view class="groupon-item margin-top-sm" v-for="(item, index) in grouponInfoList" :key="index">
          <view class="flex padding-xs padding-bottom-sm margin-top-sm">
            <image :src="item.picUrl" mode="" class="row-img margin-top-xs margin-left-xs"></image>
            <view class="margin-left-sm groupon-information margin-top-sm">
              <view class="text-black text-df overflow-1 padding-right-xs text-bold">{{ item.name }}</view>
              <view class="flex">
                <view class="text-black margin-top-xs overflow-2 text-gray text-sm">
                  <text>{{ item.grouponNum }}人团</text>
                  <text class="margin-lr-xs">|</text> 已有{{
                    item.launchNum
                  }}人参与
                </view>
              </view>
              <view class="flex justify-start margin-tb-sm align-center">
                <view class="text-price text-bold text-xl text-red">{{
                  item.grouponPrice
                }}</view>
                <view class="text-price text-decorat text-sm text-gray margin-left-xs">{{ item.goodsSku.salesPrice }}
                </view>
              </view>
              <view>
                <navigator class="button btn-enter" :url="
                    '../groupon-detail/index?id=' +
                    item.id +
                    '&shopId=' +
                    item.shopId
                  " hover-class="none">
                  <image mode="widthFix" src="../../../static/images/grouponButton.png" />
                  <text class="margin-left-xs">前去拼团</text></navigator>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
			<view :class="'cu-load ' + (loadmore?'loading':'over') "></view>
  </view>
</template>

<script>
  const util = require("@/utils/util.js");
  const app = getApp();
  import api from "@/utils/api";
  import couponInfo from "@/components/coupon-info/index";

  export default {
    data() {
      return {
        showBg: false, //是否显示背景色
        scrollData: {},
        CustomBar: this.CustomBar,
        theme: app.globalData.theme, //全局颜色变量
        page: {
          searchCount: false,
          current: 1,
          size: 10,
          ascs: "sort",
          //升序字段
          descs: "",
        },
        parameter: {},
        loadmore: true,
        grouponInfoList: [],
      };
    },
    //页面滑动 监听事件
    onPageScroll(e) {
      if (e.scrollTop > 20) {
        this.showBg = true;
      } else {
        this.showBg = false;
      }
    },
    components: {
      couponInfo,
    },
    props: {},

    onShow(e) { },
    onLoad: function (options) {
      if (options.shopId) {
        this.parameter.shopId = options.shopId;
      }
      app.initPage().then((res) => {
        this.grouponInfoPage();
      });
    },

    onReachBottom() {
      if (this.loadmore) {
        this.page.current = this.page.current + 1;
        this.grouponInfoPage();
      }
    },

    onPullDownRefresh() {
      // 显示顶部刷新图标
      uni.showNavigationBarLoading();
      this.refresh(); // 隐藏导航栏加载框

      uni.hideNavigationBarLoading(); // 停止下拉动作

      uni.stopPullDownRefresh();
    },

    methods: {
      grouponInfoPage() {
        api
          .grouponInfoPage(
            Object.assign({}, this.page, util.filterForm(this.parameter))
          )
          .then((res) => {
            let grouponInfoList = res.data.records;
            this.grouponInfoList = [...this.grouponInfoList, ...grouponInfoList];
            if (grouponInfoList.length < this.page.size) {
              this.loadmore = false;
            }
          });
      },

      refresh() {
        this.loadmore = true;
        this.grouponInfoList = [];
        this.page.current = 1;
        this.grouponInfoPage();
      },
    },
  };
</script>
<style>
  page{
    background: linear-gradient(180deg, #ffa56f 0%, #ff6a4b 39%, #f43e36 100%);
    color: #ffffff;
  }
  .row-img {
    width: 230rpx;
    height: 230rpx;
    border-radius: 10rpx;
  }

  .groupon-information {
    width: 300rpx;
    margin-left: 50rpx;
  }

  .spellGroup-bg {
    width: 100%;
    margin-top: 20rpx;
  }

  .btn-enter {
    width: 580rpx;
    height: 76rpx;
    position: relative;
  }

  .btn-enter image {
    width: 260rpx;
    height: 60rpx;
    position: absolute;
    top: 0;left: 0;
    z-index: 0;
  }
  .btn-enter text{
    position: relative;
    z-index: 1;
  }
  .groupon-item {
    background-color: #ffffff;
    width: 90%;
    margin: auto;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .button {
    font-size: 24rpx;
    color: #f9f9f9;
    line-height: 60rpx;
    text-indent: 30rpx;
  }
  .bg-groupon {
    color: #ffffff;
  }

  .bg-groupon1 {
    background: #ff9a68;
    color: #ffffff;
  }
</style>